/**
* @name: ComSearch
* @author: D
* @date: 2022/8/4 15:42
* @description：ComSearch
* @update: 2022/8/4 15:42
*/
<template>
  <div class="search_bar">
    <img src="~@/assets/images/player_title.png" alt=""/>
    <!-- 搜索歌曲 -->
    <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic"/>

    <div v-show="query"></div>
  </div>
</template>

<script>
import {searchMusic} from "@/util/api";

export default {
  name: "ComSearch",
  data() {
    return {
      //搜索关键字
      query: '',

    }
  },
  methods: {
    searchMusic() {
      console.log('111')
      if (this.query == '') return   //搜索结果为0就直接返回
      searchMusic(this.query).then(res=>{
        this.query = res.data
        this.$emit('getSearchList',this.query)
        //清空搜索
        this.query = ''
      })
    },
  }

}
</script>

<style scoped lang="scss">
.search_bar {
  height: 60px;
  background-color: #1eacda;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 11;

  img {
    margin-left: 23px;
  }

  input {
    margin-right: 23px;
    width: 296px;
    height: 34px;
    border-radius: 17px;
    border: 0px;
    background: url("~@/assets/images/zoom.png") 265px center no-repeat rgba(255, 255, 255, 0.45);
    text-indent: 15px;
    outline: none;
    cursor: pointer;
  }


}

</style>
